import React,{Component} from "react";
import style from './home.module.scss';
import {Image} from "antd"
import { Carousel, WingBlank } from 'antd-mobile';
import {connect} from "react-redux";
import {message_icon,search_icon,shopcart_icon} from '../../common/icon/svg'
const img =require('../../common/image/home/组 2.png');
class Home extends Component{
    constructor(props) {
        super(props);
        this.state = {
            imgHeight: 176,
            userInfo:{},
            homeSellBookList:[],
            bannerList:[
                {
                    url:require('../../common/image/home/swiper01.jpg'),
                    path:""
                },
                {
                    url:require('../../common/image/home/swiper02.jpg'),
                    path:""
                },
                {
                    url:require('../../common/image/home/swiper03.jpg'),
                    path:""
                },
                {
                    url:require('../../common/image/home/swiper04.jpg'),
                    path:""
                },
                {
                    url:require('../../common/image/home/swiper05.jpg'),
                    path:""
                },
            ],
            list:[
                {
                    name:"教材教辅",
                    action:{pathname:"/list",state:["教材教辅",""]},
                    img:require('../../common/image/home/type_jcjf.png')
                },
                {
                    name:"文学小说",
                    action:{pathname:"/list",state:["文学小说",""]},
                    img:require('../../common/image/home/type_wxxs.png')
                },
                {
                    name:"经管励志",
                    action:{pathname:"/list",state:["经管励志",""]},
                    img:require('../../common/image/home/type_jglz.png')
                },
                {
                    name:"全部分类",
                    action:{pathname:"/classify"},
                    img:require('../../common/image/home/type_all.png')
                }
            ],
            commList:[
                {
                    name:"附近在售",
                    action:{pathname:"/nearbyonsell"},
                    msg:"给TA一部图书馆",
                    img:require("../../common/image/home/nearby-sell.png")
                },
                {
                    name:"书单推荐",
                    action:{pathname:"/tuijian"},
                    msg:"10万+读书人推荐",
                    img:require("../../common/image/home/recommend.png")
                }
            ],
            hotList:[
                {
                    name:"总榜",
                    pid:"01",
                    path:"",
                    children:[
                        {
                            pid:"01",
                            cid:"0101",
                            name:"会赚钱的妈妈",
                            author:"鲁迅",
                            collect:"11122",
                            cover_url :require("../../common/image/home/swiper01.jpg"),
                        },
                        {   
                            pid:"01",
                            cid:"0102",
                            name:"会赚钱的妈妈",
                            author:"雨果",
                            collect:"2332",
                            cover_url :require("../../common/image/home/swiper02.jpg"),
                        },
                        {
                            pid:"01",
                            cid:"0103",
                            name:"会赚钱的妈妈",
                            author:"巴金",
                            collect:"1111",
                            cover_url :require("../../common/image/home/swiper03.jpg"),
                        }
                    ]
                },
                {
                    name:"文学",
                    pid:"02",
                    path:"",
                    children:[
                        {
                            pid:"02",
                            cid:"0201",
                            name:"会赚钱的妈妈",
                            author:"鲁迅",
                            collect:"11122",
                            cover_url :require("../../common/image/home/swiper01.jpg"),
                        },
                        {   
                            pid:"02",
                            cid:"0202",
                            name:"会赚钱的妈妈",
                            author:"雨果",
                            collect:"2332",
                            cover_url :require("../../common/image/home/swiper02.jpg"),
                        },
                        {
                            pid:"02",
                            cid:"0203",
                            name:"会赚钱的妈妈",
                            author:"巴金",
                            collect:"1111",
                            cover_url :require("../../common/image/home/swiper03.jpg"),
                        }
                    ]
                },
                {
                    name:"科技",
                    pid:"03",
                    path:"",
                    children:[
                        {
                            pid:"03",
                            cid:"0301",
                            name:"会赚钱的妈妈",
                            author:"鲁迅",
                            collect:"11122",
                            cover_url :require("../../common/image/home/swiper01.jpg"),
                        },
                        {   
                            pid:"01",
                            cid:"0302",
                            name:"会赚钱的妈妈",
                            author:"雨果",
                            collect:"2332",
                            cover_url :require("../../common/image/home/swiper02.jpg"),
                        },
                        {
                            pid:"01",
                            cid:"0303",
                            name:"会赚钱的妈妈",
                            author:"巴金",
                            collect:"1111",
                            cover_url :require("../../common/image/home/swiper03.jpg"),
                        }
                    ]
                }
            ],
            likeList:[]
        }
    }
    componentDidMount(){
          if(this.props.FavoriteBookList.length>0){
                this.setState({
                    likeList:this.props.FavoriteBookList
                })
          }
    }
    bookBtn=(item)=>{
        if(item.action){
            this.props.history.push(item.action)
        }
        console.log(item);
    }
    some=()=>{
        console.log('购买更多')
    }
   
    gethot=(item,i)=>{
        this.props.history.push({pathname:'/hot',state:{i,item}})
    }
    getjoin=()=>{
        console.log('加入二手书平台');
    }
   
    chat=()=>{
        this.props.history.push("/information")
    }
    msg=(item)=>{
        this.props.history.push(`/bookInfoDetails/${item.bid}`)
    }
    render() {
        console.log(this.props);
        let {likeList} = this.state
        return (
            <div className={style["home-root"]}>
                <div className={style["home-search"]}>
                    <div className={style["search-left"]}>
                        <span className={style.icon}>{search_icon}</span>
                        <input placeholder="搜索书名/作者/出版社" readOnly={true}
                            onClick={()=>{this.props.history.push("/bookSearchKey")}}
                        ></input>
                    </div>
                    <span className={style.admin} onClick={this.chat}>{message_icon}</span>
                </div>
                <WingBlank >
                    <Carousel 
                    autoplay={true}
                    infinite
                    // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                    // afterChange={index => console.log('slide to', index)}
                    >
                    {this.state.bannerList.map((val,i) => (
                        // <a
                        // key={i}
                        // href="http://www.alipay.com"
                        // style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        // >
                        <img key={i}
                            src={val.url.default}
                            alt="错误"
                            style={{marginTop:"72px", width: '100%',height:'130px' ,verticalAlign: 'top',borderRadius:"5px"}}
                        />
                        // </a>
                    ))}
                    </Carousel>
                </WingBlank>
                <ul className={style.booknav}>
                    {
                        this.state.list.map((item,i)=>{
                            return (
                                <li key={i} onClick={()=>this.bookBtn(item)}>
                                    <img src={item.img.default}></img>
                                    <p>{item.name}</p>
                                </li>
                            )
                        })
                    }
                </ul>
                <img src={img.default} className={style.jinru} onClick={this.getjoin}></img>
                <div className={style.list}>
                    {
                        this.state.commList.map((item,i)=>{
                            return (
                                <div className={style.item} key={i} onClick={()=>this.bookBtn(item)}>
                                    <div className={style["item-list"]}>
                                        <h3>{item.name}</h3>
                                        <p>{item.msg}</p>
                                    </div>
                                    <img src={item.img.default}>
                                    </img>
                                </div>
                            )
                        })
                    }
                </div>
                <div className={style.hot}>
                    <div className={style["hot-top"]}>
                        <div className={style["hot-left"]}>
                            <h2>热搜TOP榜</h2>
                            <p>2020-2021年读书榜单</p>
                        </div>
                    </div>
                    <div className={style["hot-list"]}>
                        {
                            this.state.hotList.map((item,i)=>{
                                return (
                                    <div key={item.pid} className={style.booklist} onClick={()=>{this.gethot(item,i)}}>
                                        <div className={style.active}>
                                            <span className={style["active-left"]}>{item.name}</span>
                                            <span className={style["active-right"]}>TOP05</span>
                                        </div>
                                        <div className={style.sort}>
                                        {
                                            item.children.map((ite,index)=>{
                                                return (
                                                    <div key={ite.cid}>
                                                        <span className={style.fan}></span>
                                                        <span className={style.yuan}>{index}</span>
                                                        <span className={style["hot-item"]}>{ite.name}</span>
                                                    </div>
                                                )
                                            })
                                        }
                                        </div>
                                        <div className={style.kailong}></div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                {this.state.likeList.length 
                    ? <div className={style.like}>
                        <h3>最新发布</h3>
                    </div> : null
                }
                
                <div className={style["like-list"]}>
                    { likeList.map((item,i)=>{
                        return (
                            <div key={i} className={style["like-item"]} onClick={()=>this.msg(item)}>
                                <Image className={style["img"]}
                                    src={'/apis'+item.cover} width={80} height={102}
                                    fallback={require("../../common/imageDefault/imgloaderr.png").default}
                                />
                                <div className={style["like-msg"]}>
                                    <h3>{item.name}</h3>
                                    <div className={style.discounts}>
                                    {/* style={{display:item.discounts===0?"block":"none"}} */}
                                        <span className={style.old}>老用户优惠</span>
                                        <span className={style.pu}>普通8折</span>
                                    </div>
                                    <p className={style.description}>
                                        {(item.description && item.description != "undefined")
                                            ?item.description:"Ta很懒啥也没说！"
                                        }
                                    </p>
                                    <div className={style.price}>
                                        <span className={style.newPrice}><b>￥</b>{item.price}</span>
                                        <span className={style.oldPrice}>￥{item.origin_price}</span>
                                    </div>
                                </div>
                                <span className={style.buy}>{shopcart_icon}</span>
                            </div>
                        )})
                    }
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) =>{
    return {
        FavoriteBookList: state.FavoriteBookList
    }
}

const mapDispatchToProps = (dispatch) =>{
    return {
        pushCart:(goods)=> {dispatch({type:"PUSH_CART",goods})}
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Home);